<script setup lang="ts">
  import { computed, ref, reactive, watch, nextTick } from 'vue';
  import { authRole, addRole, deleteRole, getRoleList } from '@/api/syssetting';
  import { FormInstance, Message, TableInstance } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import Edit from './edit/index.vue';
  import AssignAuth from './assignAuth/index.vue';
  defineOptions({
    name: 'settingRole',
  });
  const formRef = ref<FormInstance | null>(null);
  const proTableRef = ref<TableInstance | null>(null);
  const visible = ref(false);
  const visible1 = ref(false);
  const visible2 = ref(false);
  const editParam = ref();
  const authParam = ref();
  const formType = ref([
    {
      name: 'role_name',
      label: '角色名称',
      type: 'a-input',
      fieldProps: {
        span: 8,
      },
    },
    {
      name: 'role_state',
      label: '角色状态',
      slotName: 'status',
      type: 'a-select',
      fieldProps: {
        span: 8,
      },
      selectOptions: [
        {
          status: 'success',
          value: 1,
          label: '正常',
        },
        {
          status: 'danger',
          value: 2,
          label: '禁用',
        },
      ],
    },
  ]);
  const formType1 = ref([
    {
      name: 'role_name',
      label: '角色名称',
      type: 'a-input',
      fieldProps: {
        span: 24,
      },
      rules: [
        {
          message: '请输入',
          required: true,
        },
      ],
    },
    {
      name: 'role_state',
      label: '角色状态',
      type: 'a-select',
      fieldProps: {
        span: 24,
      },
      selectOptions: [
        {
          value: 1,
          label: '正常',
          scusses: true,
        },
        {
          value: 2,
          label: '禁用',
          error: true,
        },
      ],
    },
    {
      name: 'role_sort',
      label: '角色排序',
      type: 'a-input-number',
      fieldProps: {
        span: 24,
      },
    },
    {
      name: 'role_desc',
      label: '角色说明',
      type: 'a-textarea',
      fieldProps: {
        span: 24,
      },
    },
  ]);
  const formData = ref({
    role_name: '',
    role_state: '',
    role_sort: '',
    role_desc: '',
  });
  const { loading, setLoading } = useLoading();
  const tableType = [
    { dataIndex: 'role_id', title: '角色ID', align: 'center' },
    {
      title: '角色名称',
      dataIndex: 'role_name',
    },
    {
      title: '角色排序',
      dataIndex: 'role_sort',
      align: 'center',
    },
    {
      title: '角色说明',
      dataIndex: 'role_desc',
      align: 'center',
    },
    {
      title: '角色状态',
      dataIndex: 'role_state',
      slotName: 'status',
      align: 'center',
      options: [
        {
          status: 'success',
          value: 1,
          label: '正常',
        },
        {
          status: 'danger',
          value: 2,
          label: '禁用',
        },
      ],
    },
    {
      title: '操作',
      width: 130,
      fixed: 'right',
      slotName: 'operations',
      menus: [
        {
          name: '编辑',
          onClick: (record: any) => {
            visible1.value = true;
            editParam.value = {
              id: record.role_id,
            };
          },
        },
        {
          name: '分配权限',
          onClick: (record: any) => {
            visible2.value = true;
            authParam.value = {
              id: record.role_id,
              menuIds: record.menu_id,
            };
          },
        },
        {
          name: '删除',
          onClick: (record: any) => {
            deleteRole({
              role_ids: [record.role_id],
            }).then((res: any) => {
              proTableRef.value?.setRefresh();
              Message.success('删除成功！');
            });
          },
        },
      ],
    },
  ];
  async function request(params: any) {
    const res = await getRoleList(params);
    return {
      data: res.data,
    };
  }

  const handleSubmit = async () => {
    if (!(await formRef.value?.checkForm())) {
      try {
        setLoading(true);
        const res = await addRole(formRef.value?.formModel);
        Message.success(res.msg);
        visible.value = false;
        setLoading(false);
        formData.value = {
          role_name: '',
          role_state: '',
          role_sort: '',
          role_desc: '',
        };
        proTableRef.value?.setRefresh();
      } catch (error) {
        setLoading(false);
      }
    } else {
      Message.error('请正确填写表单！');
    }
  };
</script>

<template>
  <div class="container">
    <pro-table
      ref="proTableRef"
      :formType="formType"
      title="角色列表"
      :request="request"
      :tableType="tableType"
    >
      <template #btns>
        <a-button
          type="primary"
          @click="
            () => {
              isEdit = false;
              visible = true;
            }
          "
        >
          <template #icon>
            <icon-plus />
          </template>
          增加角色
        </a-button>
      </template>
    </pro-table>
    <Edit
      v-if="visible1"
      v-model:visible="visible1"
      :form-type="formType1"
      :params="editParam"
      @refresh="
        () => {
          $refs.proTableRef.setRefresh();
        }
      "
    />
    <a-modal
      title="增加角色"
      :visible="visible"
      @ok="handleSubmit"
      title-align="start"
      :ok-loading="loading"
      @cancel="
        () => {
          visible = false;
        }
      "
    >
      <pro-form
        ref="formRef"
        hiddenBtn
        :form-json="formType1"
        :form-data="formData"
      ></pro-form>
    </a-modal>
    <AssignAuth
      v-if="visible2"
      v-model:visible="visible2"
      :params="authParam"
      @refresh="
        () => {
          $refs.proTableRef.setRefresh();
        }
      "
    />
  </div>
</template>

<style scoped lang="less">
  .container {
    height: 100%;
  }

  .container {
    padding: 0 20px 20px;
  }

  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }

  .action-icon {
    margin-left: 12px;
    cursor: pointer;
  }

  .active {
    color: #0960bd;
    background-color: #e3f4fc;
  }

  .setting {
    display: flex;
    align-items: center;
    width: 200px;

    .title {
      margin-left: 12px;
      cursor: pointer;
    }
  }
</style>
